<template>
  <div class="pLists">
    <div class="showList" v-for="item in allPostsList" :key="item.id" @click="getPost(item)">
      <!-- 帖子标题 -->
      <h3>{{item.title}}</h3>
      <!-- 用户 -->
      <div class="user">
        <img :src="item.avatar" class="userAvatar" />
        <span>{{item.userName}}</span>
      </div>
      <!-- 帖子内容 -->
      <div class="posts">
        <div>{{item.intro}}</div>
      </div>
      <!-- 帖子图片 -->
      <div class="images">
        <img :src="item.coverImgUrl" />
      </div>
    </div>
  </div>
</template>

<script>
import { getPostsList } from "../api/luntan-api";
export default {
  created() {
    getPostsList().then(res => {
      // console.log(res.rows);
      this.allPostsList = res.rows;
      //展示最新的
      this.allPostsList.reverse();
    });
  },
  data() {
    return {
      allPostsList: []
    };
  },
  methods: {
    getPost(item) {
      this.$router.push({
        path: "/home/post-detail",
        query: {
          postsId: item.postsId
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.pLists {
  height: calc(100vh - 120px);
  overflow: scroll;
  padding: 8px 0 20px;
  margin-top: 5px;
  box-sizing: border-box;
  background: rgb(240, 240, 240);
}
.showList {
  // margin-left: 2%;
  // margin-right: 2%;
  box-shadow: 3px 3px rgba(242, 246, 252, 0.31);
  background: white;
  // border-radius: 15px;
  margin-bottom: 8px;
  overflow: hidden;
}
.user {
  display: flex;
  overflow: hidden;
  margin-left: 5px;
  margin-top: 4px;
  padding: 0 4px;
  width: 100%;
  img {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }
  span {
    display: inline-block;
    line-height: 200%;
    margin-left: 2px;
    font-size: 10px;
  }
}
h3 {
  width: 100%;
  margin-left: 5px;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: left;
  padding: 0 8px;
}
.posts {
  width: 73%;
  float: left;
  div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 2px 4px;
    text-align: left;
    font-size: 14px;
    color: #999;
  }
}
.images {
  padding: 2px;
  width: 100px;
  height: 80px;
  float: right;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>